<template>
  <!-- 登录表单的容器 -->
  <div id="app">
    <!-- 登录区域 -->
    <div class="login_box">
      <!-- 头部文字 -->
      <h1>新冠-物资管理系统</h1>
      <!-- 表单 -->
      <el-form
        :model="loginForm"
        :rules="loginRules"
        ref="loginForm"
        class="login_Form"
        ><h3>系统登录</h3>
        <el-form-item prop="username">
          <el-input
            type="text"
            placeholder="用户名"
            auto-complete="off"
            @keyup.enter.native="submitForm"
            prefix-icon="el-icon-user"
            v-model="loginForm.username"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            placeholder="密码"
            auto-complete="off"
            @keyup.enter.native="submitForm"
            v-model="loginForm.password"
            prefix-icon="el-icon-suitcase-1"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-checkbox
            v-model="loginForm.checked"
            label="记住密码"
          ></el-checkbox>
        </el-form-item>
        <el-form-item class="login_btn">
          <el-button type="primary" @click="submitForm('loginForm')" :loading="loading">
            <i class="el-icon-mobile-phone">登录</i></el-button
          >
          <el-button @click="resetForm('loginForm')"
            ><i class="el-icon-refresh">重置</i></el-button
          >
        </el-form-item>
      </el-form>
      <!-- 验证码 -->
      <Vcode
            :show="isShow"
            @success="success"
            @close="close"
            :canvasWidth="500"
            :canvasHeight="350"
      />
    </div>
  </div>
</template>

<script>
import Vcode from "vue-puzzle-vcode";
export default {
  name: "Login",
  data() {
    return {
      isShow:false,
      loading: false,
      loginForm: {
        username: "admin",
        password: "123456",
        checked: true,
      },
      loginRules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 2 到 12 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 16,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
    components: {
    Vcode,
  },
  methods: {
        // 登录提交
    submitForm(){
        this.$refs.loginForm.validate(async(valid)=>{
            if(!valid){
                return;
            }else{
                this.isShow = true;
            }
        })
    },
    //验证成功
    async success() {
      this.loading=true;
          let res = await this.$http.post(
            "/user/login?username=" +
              this.loginForm.username +
              "&password=" +
              this.loginForm.password
          );
          console.log(res);
          if (res.data.code === 200) {
            this.$message({
              message: "登录成功",
              type: "success",
            });
            //保存token
            console.log(res);
            localStorage.setItem("JWT_TOKEN", res.data.data);

            let resp = await this.$http.get("user/info");
                if (resp.data.code !== 200)
                    return this.$message.error("获取用户信息失败:" + resp.data.msg);
                this.userInfo = resp.data.data;
                //保存用户
                this.$store.commit("setUserInfo", resp.data.data);
                //跳转到home
                this.$router.push("/welcome");

          } else {
            this.isShow = false;
            this.$message.error({
              title:"登入失败",
              message:res.data.msg,
              type:"error"
            })
        } 
        this.loading=false;
    },
      close() {
      this.isShow = false;
    },
        /**
     获取用户信息
      */
    // async getUserInfo() {
    //     const { data: res } = await this.$http.get("user/info");
    //     if (res.code !== 200)
    //         return this.$message.error("获取用户信息失败:" + res.msg);
    //     this.userInfo = res.data;
    //     //保存用户
    //     this.$store.commit("setUserInfo", res.data);
    //     //跳转到home
    //     this.$router.push("/welcome");
    // },
    resetForm() {
      this.$refs.loginForm.resetFields();
    },
  },
};
</script>
<style lang="less" scoped>
.login_box {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  h1 {
    color: #fff;
  }

  .login_Form {
    margin-top: 30px;
    background-color: #fff;
    width: 460px;
    height: 360px;
    // box-shadow: 1px 1px 15px #eee;
    box-sizing: border-box;
    border-radius: 8px;
    padding: 30px;

    .login_btn {
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>